<template>
    <div class="articledetail">
        <article>
            <h1>{{data.title}}</h1>
            <p class="article-about">
                <time><i class="article-time" title="发布时间"/><span>{{data.time}}</span></time>
                <span><i class="article-views" title="浏览次数"/><span>{{data.views}}</span></span>
                <span><i class="article-messages" title="留言数"/><span>{{data.messages}}</span></span>
            </p>
            <div v-html="data.htmlContent" id="article-content"></div>
        </article>
        <ul class="tags">
            <li>标签:</li>
            <li v-for="(item,index) of data.tags" :key="index" class="tag">
                <a :href="'/webpage/tags/' + item.tagId">{{item.tagName}}</a>
            </li>
        </ul>
        <div class="recommended">
            <h2>相关推荐</h2>
            <ul>
                <li v-for="item of data.relatives" :key="item.articleId" class="recommended-item">
                    <a :href="'/webpage/articles/' + item.articleId">{{item.articleName}}</a>
                </li>
            </ul>
        </div>
        <message-box :articleId="articleId"/>
    </div>
</template>

<script>
    import MessageBox from '@/components/MessageBox';
	export default {
		name: "articleid",
        components:{
	        MessageBox
        },
		validate({params}){
			return /^\d+$/.test(params.articleid);
		},
        async asyncData({app,params}){
			let articleId = params.articleid;
			let result = await app.$getWebArticle({id:articleId});
			return {
				data:result.data,
				articleId
            }
        },
        mounted(){
			//修改图片样式
            let doms = document.querySelectorAll('#article-content p img');
            doms.forEach(item=>{
					item.style.maxWidth = '100%';
					item.style.display = 'block';
					item.style.margin = '0 auto';
					let imgTitle = document.createElement('p');
					imgTitle.style.textAlign = 'center';
					imgTitle.innerText = item.attributes['alt'].value;
					item.title = item.attributes['alt'].value;
					item.parentNode.appendChild(imgTitle)
				});
            //修改代码样式
            doms = document.querySelectorAll('#article-content pre');
            doms.forEach(item=>{
                item.style.paddingLeft = '10px';
                item.style.margin = '5px 0';
                item.style.marginBottom = '20px';
                item.style.backgroundColor = '#282C34';
                item.style.color = '#ABB2BF';
                item.style.overflowX = 'auto';
                item.style.borderRadius = '5px';
            });
            //修改h1样式
	        doms = document.querySelectorAll('#article-content h1');
	        doms.forEach(item=>{
		        item.style.margin = '10px 0';
		        item.style.padding = '5px';
		        item.style.backgroundColor = '#A8A8A8';
		        item.style.color = "#fff";
		        item.style.borderRadius = '5px';
	        });
	        //修改h2样式
	        doms = document.querySelectorAll('#article-content h2');
	        doms.forEach(item=>{
		        item.style.margin = '10px 0';
		        item.style.padding = '5px';
		        item.style.backgroundColor = '#A8A8A8';
		        item.style.color = "#fff";
		        item.style.borderRadius = '5px';
	        });
	        //修改h3样式
	        doms = document.querySelectorAll('#article-content h3');
	        doms.forEach(item=>{
		        item.style.margin = '10px 0';
		        item.style.padding = '5px';
		        item.style.backgroundColor = '#A8A8A8';
		        item.style.color = "#fff";
		        item.style.borderRadius = '5px';
	        });
	        //修改p样式
	        doms = document.querySelectorAll('#article-content p');
	        doms.forEach(item=>{
		        item.style.textIndent = '2em';
	        });
        },
        head(){
			let {description,title,keywords} = this.data;
	        return {
		        title,
		        meta:[
			        {hid:'description',name:'description',content:description},
			        {hid:'keywords',name:'keywords',content:keywords}
		        ]
	        }
        }
	}
</script>

<style scoped>
    .articledetail{
        min-height: 1000px;
    }
    article{
        margin-bottom: 10px;
        background-color: #fff;
        box-shadow: 3px 3px 5px #B7B7B7;
        user-select: text;
    }
    article h1{
        color:#444;
        padding:10px 20px;
        position: relative;
        border-bottom: 1px solid #444;
        margin-bottom: 10px;
    }
    article h1::before{
        content: "";
        position: absolute;
        left:0;
        top:50%;
        transform: translateY(-50%);
        width: 5px;
        height: 35px;
        background-color:#D56464 ;
    }
    .article-about{
        text-align: center;
        font-size: 12px;
        margin-bottom: 10px;
    }
    .article-about>time,.article-about>span{
        margin: 0 10px;
    }
    .article-about>time>span, .article-about>span>span{
        vertical-align: middle;
        display: inline-block;
        line-height: 20px;
        margin-left: 5px;
    }
    .article-about i{
        vertical-align: middle;
        display: inline-block;
        width: 20px;
        height: 20px;
        background-size: cover;
    }
    .article-time{
        background-image:url("@/static/icons/timer.png");
    }
    .article-views{
        background-image:url("@/static/icons/eye.png");
    }
    .article-messages{
        background-image:url("@/static/icons/message.png");
    }
    figure{
        text-align: center;
        margin-bottom: 10px;
    }
    #article-content{
        padding:10px;
        font-size: 14px;
        color:#444;
        line-height: 25px;
        letter-spacing: 1px;
    }
    .tags{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 10px;
        background-color: #fff;
        margin-bottom: 10px;
    }
    .tags li:first-child{
        margin-right: 10px;
        font-size: 14px;
    }
    .tag{
        font-size: 12px;
        padding:2px 10px;
        margin-right: 20px;
        background-color: #FFA500;
        transition: .5s;
    }
    .tag:hover{
        cursor: pointer;
        background-color: #7f828b;
    }
    .tag a{
        color: #fff;
        transition: .5s;
    }
    .recommended{
        padding: 10px;
        margin-bottom: 10px;
        background-color: #fff;
    }
    h2{
        font-size: 16px;
    }
    .recommended ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px;
    }
    .recommended-item{
        width: 50%;
        margin-bottom: 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .recommended-item a{
        color:#3CA5F6;
        font-size: 13px;
    }
    .recommended-item a:hover{
        text-decoration: underline;
    }
    @media screen and (max-width: 750px){
        article{
            box-shadow: none;
            margin-bottom: 5px;
        }
        article h1{
            margin-bottom: 5px;
            padding: 5px 10px;
            font-size: 16px;
        }
        article h1::before{
            height: 25px;
        }
        .article-about{
            transform: scale(.9);
            margin: 0;
        }
        #article-content{
            padding:5px;
            font-size: 12px;
        }
        .tags{
            padding: 5px;
            margin-bottom: 5px;
        }
    }
</style>